import React from 'react';
import { action } from 'mobx';
import { observer } from 'mobx-react-lite';
import { Modal, Form, Input, message } from 'antd';
import * as listApi from '~/apis/dashboard/dashboardApi';

const FormItem = Form.Item;
const TextArea = Input.TextArea;

export const ReplyMessageModal = observer((props: any) => {
  const state = props.state;
  const rowData = props.rowData;

  const [form] = Form.useForm();

  const handleOk = action(() => {
    form.validateFields().then((values) => {
      const params = {
        subject: values.subject,
        content: values.content,
        recipientUserId: rowData.recipientUserId,
        msgType: rowData.msgType,
        projectOwner: rowData.projectOwner,
      };

      listApi.sendMessage(params).then(() => {
        message.success('Send success');

        state.visible = false;
      });
    }).catch(() => {
      message.error('Send fail');
    });
  });

  const handleCancel = action(() => {
    state.visible = false;
  });

  return (
    <Modal
      title='Reply'
      visible={state.visible}
      onOk={handleOk}
      onCancel={handleCancel}
      cancelText='Cancel'
      okText='Send'
    >
      <Form form={form}>
        <FormItem
          name='subject'
        >
          <Input placeholder='Title' className="mb-2" allowClear />
        </FormItem>
        <FormItem
          name='content'
        >
          <TextArea placeholder='Content' allowClear style={{ height: 180 }} />
        </FormItem>
      </Form>
    </Modal>
  );
});
